前端JS、Vue实现海康萤石直播预览、回放、云台控制功能 |
您所在的位置：网站首页 › rtsp 云台控制 › 前端JS、Vue实现海康萤石直播预览、回放、云台控制功能 |
前端JS、Vue实现海康萤石直播预览、回放、云台控制功能
|
1.最新代码 及 demo
由于萤石JS库以及文档更新较为频繁 建议随版本更新 避免踩坑 萤石播放协议众多 请根据业务逻辑选择所需要的协议 萤石 · 协议对比 这里以EZOPEN协议私有协议举例 对比其他来说该协议最适用于PC端 由于官方文档比较混乱 建议文档 本文章 GitHub同时食用 评论中的问题都可以在该文章前后找到解决方案 爆内存和多屏播放就用easyplayer 要控制功能就本地解码播放 官方示例 萤石 · UIKit Javascript GitHub仓库 萤石 · GitHub仓库 控制功能 萤石 · 开始云台控制 接入异常问题 萤石开放平台 · 直播地址播放异常篇 UNIAPP > 小程序引入使用传送门 uniapp接入萤石微信小程序插件 PC多设备多屏分屏播放传送门 vue项目使用easyplayer播放m3u8直播推流
npm平台上7.7.0以上版本集成了最新版本解码库，为UIKit Pro版本，7.6.8及以下为UIKit 标准版 个人建议使用pro版 亲测 性能优化不错 非PRO版 npm install [email protected]7.6.3用着挺稳定的.... 2.引入 全局引入（不推荐） import EZUIKit from 'ezuikit-js'; 页面内按需引入（推荐） import EZUIKit from 'ezuikit-js' var player = null export default { ... } 3.页面使用 // 若全局引入 则不必在此重复引入 import EZUIKit from "ezuikit-js"; var player = null; export default { data(){ return{ } }, mounted() { this.videoPlayer() }, beforeDestroy() { player.stop() }, methods: { videoPlayer() { // divW和divH是获取了父级宽高 使播放容器能铺满div let divW = this.$refs.viewtools.clientWidth let divH = this.$refs.viewtools.clientHeight player = new EZUIKit.EZUIKitPlayer({ id: 'video-container', // 视频容器ID accessToken: '后端给的accessToken', url: '后端给的URL', // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub // 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub template: 'security', useHardDev: true // 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6 // plugin: ["talk"], // 加载插件，talk-对讲 非必填 width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px }) window.player = player } }; .eqLive{ /* 设置任意宽高任意一项即可 然后使用aspect-ratio元素 动态设置比例 */ // height: 300px width: 500px aspect-ratio: 16/9; } 3.控制步骤如下：需要的参数可以参照控制文档 文档已经放文章上面 需要 在每个按钮上添加mousedown和mouseup事件 在此省略了一些代码 只拿向上按钮举例 控制可能会有一些延迟 操作间隔建议1s以上 如果您的项目需要云台控制 设备切换 预览和回放等功能 强烈建议看完这些！！！ 1. 依赖引入问题 老库和新库代码不同 但调用方式相同 如果在一个项目中同时引入两个库调用 可能会造成冲突的情况如A页面引入A库 则正常播放 播放之后 切B页面 引入B库的B页面播放则报错 若首先进B页引B库 则A报错 这是因为A库script引入后 已经加载入内存 因为调用方式相同 所以B页会优先调用A库 所以报错 现在该问题基本不存在了 除非是比较老的项目 之前引入过海康的老库 2. 播放问题 A切换到B设备播放时 一定要先调用以下停止播放方法 可能会造成切换到B之后 A依旧在播放的问题（如果项目有切换设备播放的功能 那强烈建议在切换事件中添加以下代码） player.stop() 情况同上 正在播放时 切换到其他模块/页面 也会造成关闭当前模块/页面后依旧在播放的问题 可以在销毁时调用停止播放方法 （必须加） beforeDestroy() { player.stop() },由于官方并没有提供销毁播放器的API 如果想实现销毁DOM 需要先调用停止方法 然后对父元素进行重载或删除DOM 虽然实现了功能 但会出现一个比较严重问题 由于播放时 写入到了内存 组件销毁后 实例依旧还在内存中 JS是无法操作内存的 所以会出现内存使用骤增的情况 暂无法解决 3.云台控制问题 设置不带云台控制的主题后 如果调用切换视频方法 changePlayUrl 后 视频会出现云台控制按钮不知道官方解决了没... 控制请求不能为JSON格式故控制代码中设置了请求头并使用了qs插件进行转换 如果使用JSON格式发送 则会报10002 accessToken异常或过期 首次加载设备时设备存在不在线情况 重复切换设备播放后有可能会出现bug 此时可以参考以下代码 // video-container是播放容器 // 判断设备是否在线 具体判断根据业务逻辑来写 if (data.parameter == undefined) { // 首先调用禁止播放 player.stop() // 不在线时重载元素 （ref绑定你播放容器的父元素 然后重载） this.$refs.viewtools.innerHTML = `` } 4.多端问题 如果使用uniapp开发 官方的uniapp并非全端解决方案 如图 该代码为官方Demo 官方代码使用了renderjs 但renderjs仅支持H5和APP端 其他端均不可用！
|
【本文地址】
今日新闻 |
推荐新闻 |